<template>
  <div class="top-song">
    <div class="header">
      <div class="center">
        <span class="tabs-item active">新歌速递</span>
        <span class="tabs-item">新碟上架</span>
      </div>
    </div>
    <NewSongExpress/>
  </div>
</template>

<script lang="ts">
import NewSongExpress from './components/newSongExpress.vue'

export default {
  name: 'index',
  components: {
    NewSongExpress
  }
}
</script>

<style lang="scss" scoped>
.top-song {
  padding-top: 60px;
  height: 100%;
  box-sizing: border-box;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;

  .header {
    height: 50px;
    position: relative;

    .center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: 30px;
      border-radius: 15px;
      border: 1px solid #e7e7e7;

      .tabs-item {
        display: inline-block;
        font-size: 14px;
        color: #333333;
        padding-left: 30px;
        padding-right: 30px;
        border-radius: 15px;
        line-height: 30px;
        height: 32px;

        &:hover{
          background-color: #e7e7e7;
        }
      }

      .active {
        background-color: #d0d0d0;
        color: #eeeeee;

        &:hover {
          background-color: #d0d0d0 !important;
        }
      }
    }
  }
}
</style>
